<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{
            background: pink;

            width: 500px;
            height: 50px;
            line-height: 25px;
            margin: 50px;
            padding: 50px;
        }

        #die{
            width: 500px;
            height: 50px;
            background: skyblue;
        }

        #son{
            height: 25px;
            background: lightgreen;
        }

        b,i,u{
            background: orange;
            width: 500px;
            height: 50px;
            /* line-height: 50px; */
            margin: 50px;
            padding: 50px;
        }

        p{
            background: gray;
        }
    </style>
</head>
<body>
    <!--  
        1. 块级元素 block
            最具有代表性的元素: div
            * 独占一行
            * 宽度默认与父级一致
            * 高度默认与内容一致
            * 宽度, 高度, 行高, 内外边距都是可以手动控制
            * 容纳性: 任意元素  (除特殊性质的标签, 例如: h标签, p)


        2. 内联元素 (行级元素) inline
            最具有代表性的元素: span
            * 同在一行
            * 宽度默认与内容一致
            * 高度默认与内容一致
            * 宽度, 高度, 行高, 内外边距只有部分可以控制
            * 容纳性: 内联元素  (除特殊性质的标签: a )
    -->
    
    <div id="box">
        老母鸡<br>
        小母鸡
    </div>
    <b>加粗</b>
    <i>倾斜</i>
    <u>下划线</u>
    <span>没有任何css样式的标签</span>
    没有任何css样式的标签

    <div id="die">
        <div id="son"></div>
    </div>

    <p>
        222
        <h1>1111</h1>
    </p>


    <a href="http://www.qq.comrr">
        <a href="http://www.baidu.com">xxx</a>
    </a>


    <div>
        <div>
            <p></p>
        </div>
    </div>



</body>
</html>